<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人名片</title>
    <link rel="stylesheet" href="card.css">
</head>
<body>
    <div class="card">
        <!-- 头部区域 -->
        <header class="card-header">
            <h1>张三</h1>
            <p class="title">前端开发工程师</p>
        </header>

        <!-- 主要内容区域 -->
        <main class="card-main">
            <!-- 左侧：个人简介和技能 -->
            <div class="card-section">
                <section class="about">
                    <h2>关于我</h2>
                    <p>热爱前端开发的工程师，专注于创建用户友好的web应用。有3年开发经验，擅长现代前端技术栈。</p>
                </section>

                <section class="skills">
                    <h2>技能专长</h2>
                    <ul class="skills-list">
                        <li>HTML5</li>
                        <li>CSS3</li>
                        <li>JavaScript</li>
                        <li>React</li>
                        <li>Vue</li>
                        <li>Node.js</li>
                    </ul>
                </section>
            </div>

            <!-- 右侧：联系方式 -->
            <div class="card-section">
                <section class="contact-info">
                    <h2>联系方式</h2>
                    <p>📧 Email: zhangsan@example.com</p>
                    <p>📱 电话: 123-4567-8900</p>
                    <p>📍 地址: 北京市朝阳区</p>
                </section>

                <section class="social">
                    <h2>社交媒体</h2>
                    <div class="social-links">
                        <a href="#" class="social-link">GitHub</a>
                        <a href="#" class="social-link">LinkedIn</a>
                        <a href="#" class="social-link">微博</a>
                    </div>
                </section>
            </div>
        </main>
    </div>
</body>
</html>
